<!DOCTYPE html>

<html>

	<head>
		<meta charset="utf-8">
		<title> 命令运行反馈信息 </title>
        <meta name="viewport" content="width=device-width, initial-scale=0.65" />
	</head>

	<style>
		.title_1{
			text-align: center;
			margin: 20px 0px;
			border: 4px dashed black;
			background-color: rgb(0, 204, 255);
			border-radius: 10px;
			padding: 5px 0px;
			font-size: 18px;
		}

		.details_1 {
			text-align: center; 
			border: 4px dashed black;
			border-radius: 10px;
			margin: 20px 0px;
		}

		.details_1 summary{
			color: white;
			font-size: 18px;
			background-color: rgb(77, 114, 4);
			padding: 5px 0px;
		}

		.respone_1{
			width: 90%;
			margin: 15px auto;
			border: 3px solid black;
			border-radius: 10px;
		}

		.error_color{
			width: 95%;
			margin: 15px auto;
			border: 3px solid black;
			border-radius: 10px;
			background-color: rgba(255, 0, 0, 0.453);
			font-size: 18px; 
			word-wrap: break-word;
		}
		.success_color{
			width: 95%;
			margin: 15px auto;
			border: 3px solid black;
			border-radius: 10px;
			background-color: rgba(92, 255, 116, 0.427);
			font-size: 18px; 
			word-wrap: break-word;
		}
		.normal_color{
			width: 95%;
			margin: 15px auto;
			border: 3px solid black;
			border-radius: 10px;
			word-wrap: break-word;
			white-space:normal; 
			font-size: 20px;
		}

		.buttom_area{
			text-align: center;
			display: flex;
			margin: 10px auto;
			font-size: 14px;
			justify-content: center;
		}
		.buttom{
			padding: 5px 5px;
			width: 50px;
			margin: 10px 10px;
			background-color: rgb(0, 204, 255);
			border-radius: 10px;
			font-size: 18px;
		}
		.jump_page{
			margin: auto 10px;
			font-size: 25px; 
			width: 3em; 
			height: 1em; 
			border: 3px solid black;
		}
	</style>

	<body>
        <div style="width: 95%; margin: 0px auto;">
			<div class="title_1">当前游戏世界：$worldname</div>
			<div style="height: 10px;"></div>
			<div style="font-size: 18px; text-align: center; color: red;">如果测试数据与命令对不上，请刷新网页。</div>
			<div style="height: 10px;"></div>
			$all_command_respones
		</div>
	</body>

	<script>
		class detail_class{
			constructor(tick, max_detial){
				this.tick = tick
				this.now_page = 1 ;
				this.now_detial = 0 ;
				this.max_detial = max_detial;
				this.every_detail_in_page = 60 ;
				let aaaa = "^[0-9]{1,}$$"
				this.int_test = new RegExp(aaaa)

				this.set_display_page(1);
			}
			set_display_page(page_id) {
				if ((typeof page_id == "string") & (this.int_test.test(page_id) == false)) return null
				let page1 = parseInt(page_id)
				if ((page1 <= 0) | (((page1 - 1) * this.every_detail_in_page) >= this.max_detial)) return null

				this.now_page = page1
				this.now_detial = (page1 - 1) * this.every_detail_in_page ;
				for (let page_loop = 0 ; page_loop < this.max_detial ; page_loop++) {
					let id_name = "gametick_" + this.tick.toString() + "->" + page_loop.toString();
					let id_list = document.querySelectorAll("[id='"+ id_name +"']")
					if ((this.now_detial <= page_loop) & (page_loop < this.now_detial + this.every_detail_in_page)) id_list.forEach((item) => {item.style.display = ""})
					else id_list.forEach((item) => {item.style.display = "none"}) ; 
				}
				this.set_display_text();
			}
			set_display_text(){
				let now_page = this.now_page.toString();
				let all_page = (Math.floor(this.max_detial / this.every_detail_in_page) + 1).toString();
				document.getElementById("gametick_page_info1_" + (this.tick).toString()).innerHTML = "第" + now_page + "页<br>共" + all_page + "页";
				document.getElementById("gametick_page_info2_" + (this.tick).toString()).innerHTML = "第" + now_page + "页<br>共" + all_page + "页";
			}
			add_page(){this.set_display_page(this.now_page+1)}
			remove_page(){this.set_display_page(this.now_page-1)}
		}
		
		const detail_class_list = [$details_class]; 
		detail_class_list.forEach((item) => {item.set_display_page(1)})
	</script>

</html>